﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JooQ :: Demos :: Message and Broadcast Queue</title>
    <style type="text/css">
        .square { height: 100px; width: 100px; }
        .bg-red { background-color: Red; }
        .bg-green { background-color: Green; }
        .toggle-off { display: none; }
        .toggle-on { display: block; }
        .block { margin: 5px; float: left; }
        .pointer { cursor: pointer; }
        .pet { float: left; margin: 10px; border: solid 1px black; padding: 10px; }
        .pet img { max-height: 124px; max-width: 124px; }
        
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/jquery/liveQuery.js?v=1"></script>
    <script type="text/javascript" src="scripts/core.js?v=1"></script>
    <script type="text/javascript" src="scripts/events.js?v=1"></script>
    <script type="text/javascript" src="scripts/bootloader.js?v=1"></script>
    <script type="text/javascript" src="scripts/domdata.js?v=1"></script>
    <script type="text/javascript" src="scripts/dependencies.js?v=1"></script>
    <script type="text/javascript" src="scripts/behaviors.js?v=1"></script>
</head>
<body>
    <h1>
        JooQ :: Message and Broadcast Queue</h1>
    <h3>
        Animals (click a picture to make them speak)
    </h3>
    <div style="height: 400px;">
        <div class="pet" data-behaviors-lazy="Docs.Demos.Lib.PetBehavior" data-voice-box="voiceBox"
            data-name="Turtle" data-type="Pet">
            <input type="button" value="Walk" onclick="$(this).parent().msg('walk')" />
            <input type="button" value="Do Business" onclick="$(this).parent().msg('doBusiness')" />
            <input type="button" value="Check Box" onclick="$(this).parent().msg('checkBox')" /><br />
            <img src="images/turtle.gif" class="pointer" onclick="$(this).parent().msg('speak')" /><br />
            <div style="height: 20px;">
                <span id="voiceBox" class="voice toggle-off"></span>
            </div>
        </div>
        <div class="pet" data-behaviors-lazy="Docs.Demos.Lib.PetBehavior" data-voice-box="voiceBox2"
            data-name="Taboo" data-type="Dog">
            <input type="button" value="Walk" onclick="$(this).parent().msg('walk')" />
            <input type="button" value="Do Business" onclick="$(this).parent().msg('doBusiness')" />
            <input type="button" value="Check Box" onclick="$(this).parent().msg('checkBox')" /><br />
            <img src="images/dog.gif" class="pointer" onclick="$(this).parent().msg('speak')" /><br />
            <div style="height: 20px;">
                <span id="voiceBox2" class="voice toggle-off"></span>
            </div>
        </div>
        <div class="pet" data-behaviors-lazy="Docs.Demos.Lib.PetBehavior" data-voice-box="voiceBox3"
            data-name="Linq" data-type="Cat">
            <input type="button" value="Walk" onclick="$(this).parent().msg('walk')" />
            <input type="button" value="Do Business" onclick="$(this).parent().msg('doBusiness')" />
            <input type="button" value="Check Box" onclick="$(this).parent().msg('checkBox')" /><br />
            <img src="images/cat.gif" class="pointer" onclick="$(this).parent().msg('speak')" /><br />
            <div style="height: 20px;">
                <span id="voiceBox3" class="voice toggle-off"></span>
            </div>
        </div>
    </div>
</body>
</html>
